<template>
	<view class="address">
		<roc-scroll @loadData="loadData" :visible_height="visible_height" :hasMore="hasMore"
			refresher_background="#f5f5f5" :data_number="data_number" :solt_height="solt_height" background="#f5f5f5"
			footer_background="#f5f5f5">
			<view class="" slot="data-content">
				<view class="address-list">
					<view class="ad_card" v-for="(item,index) in data" :key="index">
						<view class="head">
							<view class="user_name">{{item.real_name}}</view>
							<view class="user_phone">{{item.mobile}}</view>
						</view>
						<view class="ad">
							<view class="ad_icon iconfont icon-dizhi"></view>
							<view class="ad_txt">
								{{item.address}}
							</view>
						</view>
						<view class="menu">
							<view class="menu_l">
								<view class="check_box" :class="item.is_default == 1 ? 'checked' : ''"
									@click.stop="setDefaultAddress(index)">
									<text class="iconfont icon-duigou"></text>
								</view>
								<view class="default">设为默认地址</view>
							</view>
							<view class="menu_r">
								<view class="edit menu_cell" @click.stop="editAddress(index)">
									<text class="iconfont icon-bianji"></text>
									<text class="cell_name">编辑</text>
								</view>
								<view class="del menu_cell" @click.stop="deleteAddress(item,index)">
									<text class="iconfont icon-shanchu"></text>
									<text class="cell_name">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</roc-scroll>

		<view class="modal" v-if="modalName == 'add'">
			<view class="card">
				<view class="cuIcon-close" @click="closeModal"></view>
				<view class="ad_line">
					<view class="line_l">联系人</view>
					<view class="inp_box">
						<input type="text" v-model="form.real_name" placeholder="联系人" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">电话</view>
					<view class="inp_box">
						<input type="number" v-model="form.mobile" placeholder="联系电话" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>

				<view class="ad_line">
					<view class="line_l">地址</view>
					<view class="inp_box" @click="locFn()">

						<view>{{form.address?form.address:'请选择服务位置'}}</view>
						<text class="lg text-gray cuIcon-locationfill" style="margin-left: auto;"></text>
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">详细地址</view>
					<view class="inp_box">
						<input type="text" v-model="form.house_number" placeholder="详细地址，例: A座102室" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>


				<view class="ad_line" @click="changeFormDefault()">
					<view class="check_box" :class="form.is_default == 1 ? 'checked' : ''">
						<text class="iconfont icon-duigou"></text>
					</view>
					<view class="default">设为默认地址</view>
				</view>

				<view class="submit" @click="saveAddress()">保存</view>
			</view>
		</view>


		<view class="add_btn" @click="showModal('add')">添加地址</view>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button :content="'是否删除该地址'"></u-modal>

		<u-modal v-model="isshow" show-cancel-button @confirm="openLoaction" title="申请权限"
			content="将获取定位地址权限用于添加服务地址"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 0,
				hasMore: true,
				data: [],
				data_number: 0,
				show: false,

				// 初始化表单数据
				form: {
					id: 0,
					real_name: '',
					province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '',
					is_default: 2,
					house_number: ''
				},

				disabled: false,
				choice: 0,
				back: 0,
				ident: false,
				isshow: false

			}
		},
		onLoad(options) {
			if (options.type) {
				if (options.type == 'back') {
					this.back = 1
				}
			}
			this.loadData(0)
		},
		methods: {
			//初始化信息
			initData() {
				this.disabled = false
				this.form = {
					id: 0,
					real_name: '',
					province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '',
					is_default: 2,
				}
			},

			initScrollData() {
				this.page = 0
				this.hasMore = true
				this.data = []
				this.data_number = 0
			},

			loadData(type, callback) {
				uni.showLoading({
					title: "加载中"
				})
				let opts = {
					url: "user_address/index",
					method: 'get'
				};

				if (type == 1) {
					this.initScrollData()
				}
				this.page++

				let param = {
					page: this.page,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.data.data.length < res.data.data.per_page)
						this.hasMore = false;
					// 把后端数据赋给页面	
					this.data = [...this.data, ...res.data.data];

					this.data_number = this.data.length
					// 隐藏加载条 重置下拉 上拉状态
					uni.hideLoading()
					if (type) callback(false)
				}, error => {

				})
			},

			showModal(e) {
				this.modalName = e;
			},

			closeModal() {
				this.modalName = null
				this.initData()
			},

			//设置默认值
			setDefaultAddress(index) {
				let opts = {
					url: "user_address/address_set_default",
					method: 'post'
				};

				let param = {
					id: this.data[index].id,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.code == 0) {
						this.initScrollData()
						this.loadData(0)
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}, error => {

				})
			},
			locFn() {
				// if (!uni.getStorageSync('is_Address')) {
				// 	uni.setStorageSync('is_Address', true)
				// 	this.isshow = true
				// } else {
					this.openLoaction()
				// }
			},
			openLoaction() {
				var that = this
				if (this.ident) {
					return
				}
				this.ident = true

				uni.chooseLocation({
					success: function(result) {
						that.ident = false
						that.$util.transitionLocation(result.latitude, result.longitude, function(data) {
							if (data.code == 0) {
								that.form.lat = result.latitude
								that.form.lng = result.longitude
								that.form.province = data.data.province
								that.form.city = data.data.city
								that.form.district = data.data.district
								that.form.address = result.address
							}
						})
					},
					fail(err) {
						that.ident = false
					}
				});

			},
			changeFormDefault() {
				if (this.form.is_default == 1) {
					this.form.is_default = 2
				} else {
					this.form.is_default = 1
				}
			},
			confirm() {
				let opts = {
					url: "user_address/del",
					method: 'get'
				};

				let param = {
					id: this.currentItem.id,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.code == 0) {
						// this.data.splice(this.operation_index, 1)
						if (this.data.length < 5) {
							this.initScrollData()
							this.loadData(0)
						}
						this.$util.msg(res.msg)
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {

				})
			},
			cancelAddress(item) {
				this.currentItem = item
				this.show = true

			},
			//保存地址
			saveAddress() {
				if (this.disabled)
					return

				if (!this.form.real_name || this.form.real_name.length < 2)
					return uni.showToast({
						title: "服务人姓名格式不正确",
						icon: "none",
					})

				let mobile = this.form.mobile;
				if (mobile == "" || (mobile.length != 11) || /^1[3456789]\d{9}$/.test(mobile) == false) {
					return uni.showToast({
						title: '请输入正确的手机号码！',
						icon: 'none'
					})
				}

				if (!this.form.address || !this.form.house_number)
					return uni.showToast({
						title: '请输入服务地址！',
						icon: "none"
					});


				let opts = {
					url: 'user_address/save',
					method: 'post'
				};

				uni.showLoading({
					title: "地址保存中",
					icon: "none"
				})
				this.disabled = true

				this.request.httpTokenRequest(opts, this.form).then(res => {

					uni.hideLoading()
					if (res.code == 0) {
						//关闭模态框，清除信息
						this.closeModal()
						this.initData()
						this.initScrollData()
						this.loadData(0)
					}
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}, error => {

				})

			},

			//编辑地址
			editAddress(index) {
				this.form = Object.assign({}, this.data[index])
				this.showModal('add')
			},

			//删除地址
			deleteAddress(item, index) {
				this.currentItem = item
				this.show = true
			},

		}
	}
</script>

<style lang="scss" scoped>
	.address {
		height: 100vh;
		background: $roc-color-f5;
	}

	.address-list {
		background-color: $roc-color-f5;
		padding: 0 $roc-primary-padding-lr;
	}

	.check_box {
		width: 36rpx;
		height: 36rpx;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid $roc-color-ccc;
		margin-right: 10rpx;
		overflow: hidden;

		.icon-duigou {
			font-size: 20rpx;
			line-height: 1;
			color: #fff;
		}
	}

	.checked {
		background-color: $roc-color-233;
		border: 1px solid $roc-color-233;
	}

	.default {
		font-size: 26rpx;
		color: #000;
	}

	.ad_card {
		width: 100%;
		padding: 16upx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 10px;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 0;
			font-size: 32rpx;
			color: #000;
		}

		.ad {
			display: flex;
			align-items: center;
			padding: 12rpx 0;

			.ad_icon {
				color: $roc-color-233;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.ad_txt {
				flex: 1;
				width: 0;
				font-size: 26rpx;
				color: #666;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.menu_l {
				display: flex;
				align-items: center;
				line-height: 1;

			}

			.menu_r {
				display: flex;
				align-items: center;

				.menu_cell {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-left: 30rpx;
					color: #999;
					font-size: 24rpx;

					.iconfont {
						color: $roc-color-233;
						margin-right: 3px;
					}

					.icon-bianji {
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 40px;
		border-radius: 20rpx;
		background-color: $roc-color-233;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1px;
		font-size: 30rpx;
		font-weight: 700;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.7);

		.card {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 91;
			width: 100%;
			padding: 30rpx $roc-primary-padding-lr;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;

			.cuIcon-close {
				position: absolute;
				z-index: 92;
				top: 20rpx;
				right: 20rpx;
				font-size: 32rpx;
				color: #000;
			}

			.ad_line {
				height: 56px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid $roc-color-f7;

				.line_l {
					width: 140rpx;
					font-size: 30rpx;
					color: #000;
					flex-shrink: 0;
				}

				.inp_box {
					display: flex;
					align-items: center;
					flex: 1;
					height: 52px;

					.inp {
						flex: 1;
						color: #000;
						font-size: 28rpx;
						line-height: 1;
					}

					.choice-icon {
						flex-shrink: 0;
						height: 52px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}

				.line_r {
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;

					.icon-dingwei {
						flex-shrink: 0;
						margin-left: 16rpx;
						font-size: 36rpx;
						color: $roc-color-light-yellow;
					}

					.location {
						flex: 1;
					}

					.ccc {
						color: #ccc;
					}
				}
			}

			.pos {
				align-items: flex-start;
			}

			.submit {
				width: 100%;
				height: 40px;
				border-radius: 30rpx;
				background-color: $roc-color-233;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 1px;
				margin-top: 30px;
			}
		}
	}
</style>